<div>
    <p>我是，<span id='nickName'></span></p>
    <div id="introduce"></div>
</div>　
<script>
    function Vue(options) {
        var self = this;
        self.data = options.data;
        // self.vm = {}

        // 设置vm代理
        Object.keys(self.data).forEach(function (key) {
            Object.defineProperty(self, key, {
                emumerable: false,
                configurable: true,
                get: function () {
                    console.log('Do defineProperty getter')
                    return self.data[key];
                    return document.getElementById(key).innerHTML;

                },
                set: function (newVal) {
                    console.log('Do defineProperty setter', newVal)

                    self.data[key] = newVal;
                    document.getElementById(key).innerHTML = newVal;
                }
            })
        })

        // 设置初始值
        Object.keys(self.data).forEach(function (key) {
            self[key] = self.data[key]
        })

    }

    var app = new Vue({
        data: {
            nickName: "张无忌",
            introduce: "九阳神功"
        }
    })

    console.log('app', app)
    var i = 0

    // 模拟动态设定值
    setInterval(function () {
        app.introduce = "九阳神功 第" + (i++ % 9 + 1) + "重"
    }, 1000)

    // 模拟动态取值
    setInterval(function () {
        console.log(app.introduce)
    }, 1500)
</script>